<script setup lang="ts">
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import type { CompetitionCardProps } from '../types/CompetitionCardProps'
import { Button } from 'ant-design-vue';

const props = defineProps<{ app: CompetitionCardProps, }>();

const router = useRouter()

onMounted(() => {
});

const handleInfo = () => {
  if (props.app.competitionId)
    router.push({ name: 'competitionDetails', params: { competitionId: props.app.competitionId } })
};
</script>

<template>
  <div class="card">
    <div class="card-header">
      <span v-if="props.app.top === 1" class="saitag">置顶</span>
      <span class="title">{{ props.app.title }}</span>
      <span class="date">{{ props.app.date }}</span>
    </div>
    <div class="card-content">
      <p>{{ props.app.description }}</p>
    </div>
    <div class="card-footer">
      <Button class="button" @click="handleInfo">
        查看详情
      </Button>
    </div>
  </div>
</template>

<style scoped>
.card {
  background: #fff;
  border-radius: 0.625rem;
  padding: 1rem;
  font-family: 'PingFangSC';
  text-align: left;

  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s; /* 添加一个轻微的缩放效果 */
  cursor: default; /* 鼠标悬停在卡片上时不变 */
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
  gap: 0.5rem;
}

.tag {
  background-color: #ff6a00;
  color: #fff;
  font-size: 1rem;
}

.title {
  font-weight: bold;
  font-size: 1.25rem;
}

.date {
  font-size: 1rem;
  color: #888;
  margin-left: auto;
}

.card-content {
  font-size: 1rem;
  color: #000;
}

.card-footer {
  display: flex;
  justify-content: left;
  align-items: center;
}

.action-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 0.5rem;
  color: #81838f;
  font-size: 1.125rem;
}

.button {
  background-color:  #e2e9fa;
  color: rgb(56, 104, 247);
  border: none;
  padding: 0.3rem 1rem;
  border-radius: 0.25rem;
  margin-left: auto;
  font-size: 1rem;
}

.detail-button:hover {
  background-color: #a9bef7;
  color: #fff;
}
</style>
